<!DOCTYPE html>
<html>
<head>
    <title>server_2</title>
</head>
<body>
    <h1>消息发送方</h1>
    <h2>
        当前路径：<span id="cururl"></span>
    </h2>

    <div>
        <input type="text" id="messageInput" placeholder="输入要发送的消息">
        <button onclick="sendMessage()">发送消息</button>
    </div>

    <hr>

    <iframe id="receiverFrame" src="http://www.websecurity.com/post_message_receiver.html" width="100%" height="400"></iframe>
    
    <div id="log"></div>
    
    <script>
        document.getElementById('cururl').innerHTML = window.location.href;
        
        function sendMessage() {
            var message = document.getElementById('messageInput').value;
            var receiverOrigin = 'http://www.websecurity.com';
            
            // 发送消息到接收方
            var iframe = document.getElementById('receiverFrame');
            iframe.contentWindow.postMessage({
                type: 'userMessage',
                content: message,
                timestamp: new Date().toISOString()
            }, receiverOrigin);
            
            logMessage('已发送: ' + message);
        }
        
        // 接收消息
        // 在下面添加你的代码，收到数据后调用logMessage方法将数据显示在log元素中
        some codes ...
        
        function logMessage(msg) {
            var log = document.getElementById('log');
            log.innerHTML += '<p>' + msg + '</p>';
        }
    </script>
</body>
</html>